<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar title="登录/注册"
                 left-arrow />
    <!-- 登录表单 -->
    <!-- van-form表单组件 -->
    <!-- submit自定义事件，表单提交事件,不是给提交按钮 -->
    <!-- van-field是输入框组件 -->
    <!-- v-model 关联数据 -->
    <!-- name 类似原生的name -->
    <!-- label这行的文字  -->
    <!-- placeholder 提示文本 -->
    <!-- rules 校验规则，如果表单校验不通过，是不会触发表单的提交事件的，自动校验过程！ -->
    <van-form ref="form" @submit="onSubmit"
              :show-error="false">
      <van-field v-model="formData.mobile"
                 name="mobile"
                 left-icon="shouji"
                 icon-prefix="toutiao"
                 clearable
                 placeholder="手机号"
                 :rules="formRules.mobile" />
      <van-field v-model="formData.code"
                 name="code"
                 left-icon="yanzhengma"
                 icon-prefix="toutiao"
                 clearable
                 placeholder="验证码"
                 :rules="formRules.code">
        <!-- 右侧内容 -->
        <template #button>
           <!-- 倒计时 -->
          <van-button class="count-down" v-if="isCountDownShow"  size="small" type="info"  native-type="button">
            <van-count-down :time="time" format="ss 秒" @finish="isCountDownShow=false" />
          </van-button>
          <!-- 发送按钮 设置navtive-type类型为button-->
          <van-button v-else size="small"
                      native-type="button"
                      @click="sendSms"
                      type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round
                    block
                    type="info">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, getSms } from '@/api/user'
export default {
  name: 'login',
  data () {
    return {
      // 表单数据
      formData: {
        mobile: '17342065909',
        code: '246810'
      },
      // 验证规则对象
      formRules: {
        mobile: [
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3|5|7|8]\d{9}$/, message: '手机号格式错误' }
        ],
        code: [
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '验证码格式不正确' }
        ]
      },
      // 倒计时时长
      time: 60 * 1000,
      // 显示倒计时
      isCountDownShow: false
    }
  },
  methods: {
    // 表单提交事件
    async onSubmit (values) {
      // 1.表单验证(自动验证)
      try {
        // 等待框
        this.$toast.loading({
          message: '登录中...',
          duration: 0,
          forbidClick: true
        })
        // 2.发送请求
        // value表示表单的数据
        const { data: res } = await login(values)
        // 设置给仓库里面存储起来
        this.$store.commit('setUser', res.data)
        // 成功弹框
        this.$toast.success('登录成功')
        // 跳转到用户中心页面 (将来要优化！判断是否有重定向的地址！)
        this.$router.replace(this.$route.query.url || '/user')
        // 3.响应处理
      } catch (error) {
        console.dir(error)
        // 失败弹框
        this.$toast.fail('登录失败')
      }
    },
    // 发送验证码
    async sendSms () {
      try {
        // 1. 验证手机号是否格式正确
        await this.$refs.form.validate('mobile')
        // 2. 调用发送验证码接口
        await getSms(this.formData.mobile)
        // 3. 如果成功才可以将倒计时显示
        this.isCountDownShow = true
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.count-down{
  width: 150px;
  .van-count-down{
    color: #fff;
  }
}
</style>
